<template>
  <div>
      <div v-if="multiple_choice" style="text-align:right;margin:5px;">
          <el-button icon="el-icon-check" @click="btnSure()">确定</el-button>
          <el-button icon="el-icon-close" @click="btnCancel()">取消</el-button>
      </div>
      <el-container style="height: 450px;border:1px solid #CCC">
          <el-aside width="150px">
              <el-menu class="emitem-nav" @select="handleclsSelect" :default-active="groupid">
                  <el-menu-item index="全部">全部</el-menu-item>
                  <el-menu-item :index="emitem.name" :key="index" v-for="(emitem, index) in clsMenus">{{ emitem.name }}</el-menu-item>
              </el-menu>
          </el-aside>
          <el-container style="overflow: hidden;">
              <el-main style="overflow: hidden;">
                  <vxe-grid :columns="tableColumn" :display-pager="false" :sort-config="{trigger: 'cell'}" header-align="center" :pager-config="tablePage" :proxy-config="tableProxy" @cell-dblclick="vxselect" border height="448px" highlight-current-row highlight-hover-row ref="ddlitemTable" resizable size="mini" stripe>
                  </vxe-grid>
              </el-main>
          </el-container>
      </el-container>
  </div>
</template>
<script>
import XE from "xe-utils";
export default {
  props: {
      pfulldata: { type: Object, default: null },
      labgroupid: { type: Number, default: 0 },
      multiple_choice: { type: Boolean, default: false },
      prgno: { type: String },
      beforeChange: { type: Function },
  },
  data() {
      return {
          selvalue: 0,
          groupid: "全部",
          clsMenus: [],
          fulldata: this.pfulldata,
          alldata: [],
          tableColumn: [],
          tableProxy: {
              index: true, // 启用动态序号代理
              // 配置响应的数据属性
              props: {
                  result: "data.result",
                  total: "data.page.total",
              },
              ajax: {
                  // page 对象： { pageSize, currentPage }
                  query: (param) => {
                      let _this = this;
                      return new Promise((s, f) => {
                          var collist = [];
                          try {
                              if (this.multiple_choice) {
                                  //多选模式
                                  collist = [
                                      {
                                          type: "selection",
                                          width: 40,
                                          align: "center",
                                      },
                                  ];
                                  for (let i = 0, len = this.fulldata.Cols.length; i < len; i++) {
                                      const item = this.fulldata.Cols[i];
                                      let colitem = {
                                          field: item.field,
                                          title: item.title,
                                          width: item.width,
                                          sortable: true,
                                      };
                                      collist.push(colitem);
                                  }
                                  this.tableColumn = collist;
                              } else {
                                  //单选模式
                                  for (let i = 0, len = this.fulldata.Cols.length; i < len; i++) {
                                      const item = this.fulldata.Cols[i];
                                      let colitem = {
                                          field: item.field,
                                          title: item.title,
                                          width: item.width,
                                          sortable: true,
                                      };
                                      //if (i === 0) colitem.fixed = "left";
                                      collist.push(colitem);
                                  }
                                  this.tableColumn = collist;
                              }

                              //根据groupid过滤
                              let cData = this.fulldata.Data;
                              if (this.groupid != "全部") {
                                  cData = cData.filter((item) => item.instrname === this.groupid);
                              } else {
                                  cData = this.alldata.Data;
                              }
                              //分页
                              // var pagedData = cData.slice((param.page.currentPage - 1) * param.page.pageSize, param.page.currentPage * param.page.pageSize);
                              s({ data: { page: { total: cData.length }, result: cData } });
                          } catch (er) {
                              s({ data: { page: { total: this.fulldata.Data.length }, result: this.fulldata.Data } });
                          }
                      });
                  },
              },
          },
          finallvalue: [],
          selectKey: 0,
          tablePage: {
              pageSize: 1000,
          },
      };
  },
  created() {
      this.loadAllData();
  },
  mounted() {},
  methods: {
      handleclsSelect: function (key, keyPath) {
          this.groupid = key;
          if (this.multiple_choice) {
              this.SelectRecordsSet();
          }
          let that = this;
          setTimeout(() => {
              that.$refs.ddlitemTable.commitProxy("query").then(() => {
                  if (that.selvalue) {
                      if (that.selvalue.toString().indexOf(",") > 0) {
                          let ids = that.selvalue.toString().split(",");
                          let datas = that.fulldata.Data.filter((m) => ids.indexOf(m.rpt_itemcode.toString()) > -1);
                          if (datas && datas.length > 0) that.$refs.ddlitemTable.setSelection(datas, true);
                      } else {
                          let data = that.fulldata.Data.find((m) => m.rpt_itemcode == that.selvalue);
                          if (!!data) {
                              var drs = [];
                              drs.push(data);
                              if (that.multiple_choice) that.$refs.ddlitemTable.setSelection(drs, true);
                              that.$refs.ddlitemTable.setCurrentRow(data).then(() => {
                                  that.$refs.ddlitemTable.scrollToRow(data);
                              });
                          }
                      }
                  }
              });
          }, 10);
      },
      setCurrentValue: async function (v) {
          this.selvalue = v;
          if (!this.fulldata) {
              await this.loadAllData();
          }
          if (this.selvalue) {
              if (this.selvalue.toString().indexOf(",") > 0) {
                  let ids = this.selvalue.toString().split(",");
                  let datas = this.fulldata.Data.filter((m) => ids.indexOf(m.rpt_itemcode.toString()) > -1);
                  // console.log("datas", datas);
                  if (datas && datas.length > 0) this.$refs.ddlitemTable.setSelection(datas, true);
              } else {
                  let data = this.fulldata.Data.find((m) => m.rpt_itemcode == this.selvalue);
                  if (!!data) this.groupid = data.instrname;
                  this.handleclsSelect(this.groupid, "");
              }
          } else {
              this.groupid = "全部";
              this.handleclsSelect(this.groupid, "");
          }
      },
      loadAllData: async function () {
          if (!this.fulldata || this.fulldata.Data.length == 0) {
              let res = await this.$tool.request({
                  url: "ucent/ddl",
                  method: "post",
                  data: {
                      action: "qcitem",
                      labgroupid: XE.toInteger(this.labgroupid),
                      prgno: this.prgno,
                  },
              });
              this.fulldata = res.filitem;
              this.alldata = res.allitem;
          }
          let clsArray = [];
          for (let i = 0; i < this.fulldata.Data.length; i++) {
              let cfData = this.fulldata.Data[i];
              if (
                  clsArray.find((x) => {
                      return x.name === cfData.instrname;
                  }) == undefined
              ) {
                  let citem = { name: cfData.instrname, seq: cfData.seq };
                  clsArray.push(citem);
              }
          }
          clsArray.sort(function (a, b) {
              return a.seq - b.seq;
          });
          this.clsMenus = clsArray;
          this.groupid = "全部";
          // cData = this.alldata.Data;
          this.handleclsSelect(this.groupid, "");
      },
      vxselect: async function (data, evt) {
          let myvalue = data.row.rpt_itemcode;
          if (!this.multiple_choice) {
              let execflag = true;
              if (typeof this.beforeChange === "function") {
                  let r = await this.beforeChange(data.row.rpt_itemcode);
                  if (!r) {
                      execflag = false;
                  }
              }
              if (execflag) {
                  this.$nextTick(() => {
                      this.$emit("change", myvalue, data.row.rptunitname);
                      this.$emit("changeObj", {code:myvalue, name:data.row.rptunitname, row:''});
                  });
              }
          }
      },
      async btnSure() {
          let rowRecords = this.$refs.ddlitemTable.getSelectRecords();
          this.$emit("change", rowRecords);
          this.$emit("changeObj", {code:'', name:'', row:rowRecords});
          // this.SelectRecordsSet();
          // var v = this.finallvalue.join(","); // this.finallvalue.substring(0, this.finallvalue.length - 1);
          // let execflag = true;
          // if (typeof this.beforeChange === "function") {
          //     let r = await this.beforeChange(v);
          //     if (!r) {
          //         execflag = false;
          //     }
          // }
          // if (execflag) {
          //     this.$nextTick(() => {
          //         this.$emit("change", v);
          //     });
          // }
      },
      btnCancel() {
          this.$emit("cancel");
      },
      SelectRecordsSet() {
          let data = this.$refs.ddlitemTable.getSelectRecords(); //当前页面选中的数据
          let rdata = this.$refs.ddlitemTable.tableData; //当前页面所有的数据
          let rptitemarr = [];
          data.forEach((element) => {
              rptitemarr.push(element.rpt_itemcode);
          });
          try {
              rdata.forEach((element) => {
                  if (data.length > 0) {
                      //当前页面有勾选的项目
                      if (rptitemarr.indexOf(element.rpt_itemcode) > -1) {
                          //勾选的数据是当前数据
                          if (this.finallvalue.indexOf(element.rpt_itemcode) < 0) {
                              this.finallvalue.push(element.rpt_itemcode);
                          }
                      } else {
                          if (this.finallvalue.indexOf(element.rpt_itemcode) > -1) {
                              let index = this.finallvalue.indexOf(element.rpt_itemcode);
                              this.finallvalue.splice(index, 1);
                          }
                      }
                  } else {
                      //当前页面没有勾选的项目
                      if (this.finallvalue.indexOf(element.rpt_itemcode) > -1) {
                          let index = this.finallvalue.indexOf(element.rpt_itemcode);
                          //返回值的里面有则删除
                          this.finallvalue.splice(index, 1);
                      }
                  }
              });
          } catch (e) {}
      },
  },
  mounted() {},
};
</script>
<style scoped>
.el-main {
  padding: 0;
}

/deep/.el-dialog__body {
  padding-top: 0px;
  padding-bottom: 0px;
}
.el-aside {
  color: #333;
  border: solid #cccccc;
  border-width: 1px 0 1px 1px;
  background-color: #f5f5f5;
}
.el-menu {
  border: none;
  background-color: #f5f5f5;
}
/deep/ .emitem-nav .el-menu-item {
  height: 28px !important;
  line-height: 28px !important;
}
</style>
